<!-- echarts 复合封装 -->
<template>
	<view>
		<!-- #ifndef MP-WEIXIN -->
		<echarts :option="ecapp.option" :style="ecstyle"></echarts>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<uni-ec-canvas class="uni-ec-canvas" :id="canvasTid" :canvas-id="ecid" :ec="ecapp" :style="ecstyle"></uni-ec-canvas>
		<!-- #endif -->
	</view>
</template>

<script>
// #ifndef MP-WEIXIN
import echarts from '@/packageF/components/echarts/echarts.vue';
// #endif
// #ifdef MP-WEIXIN
import uniEcCanvas from '@/packageF/components/uni-ec-canvas/uni-ec-canvas';
// #endif

export default {
	components: {
		// #ifndef MP-WEIXIN
		echarts,
		// #endif
		// #ifdef MP-WEIXIN
		uniEcCanvas
		// #endif
	},
	props: {
		ecapp: {
			type: Object,
			required: true
		},
		ecstyle: {
			type: String,
			required: true
		},
		ecid: {
			type: String,
			required: true
		}
	},
	data() {
		return {
			canvasTid: '',
			canvasStyle: ''
		};
	},
	created() {
		this.canvasTid = 'echarts_' + this.randomString(24);
	},
	methods: {
		randomString(len) {
			len = len || 32;
			let chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
			let maxChars = chars.length;
			let result = '';
			for (let i = 0; i < len; i++) {
				result += chars.charAt(Math.floor(Math.random() * maxChars));
			}
			return result;
		},
	}
};
</script>

<style scoped>
.uni-ec-canvas {
	display: block;
}
</style>
